<template>
  <el-contaioner>
    <el-main>
      <div
        class="header"
        style="
          width: 99%;
          background: #f5f5f6;
          height: 220px;
          border: 1px solid #f5f5f6;
        "
      >
        <p
          style="
            text-align: center;
            margin-left: -10%;
            font-size: 32px;
            font-weight: bold;
          "
        >
          一键搜索合适房源
        </p>
        <p style="text-align: center; margin-left: -8%; color: gray">
          求租出租，一搜尽揽
        </p>
        <div style="margin-top: 15px; width: 60%; margin-left: 25%">
          <el-input placeholder="搜索你想要的房子" v-model="input">
            <el-button slot="append">👀</el-button>
          </el-input>
        </div>
      </div>
      <div class="" style="width: 92%; height: auto; margin-left: 8%">
        <div id="search" style="width: 100%; height: auto">
          <p style="font-size: 16px; color: gray">青岛租房</p>
          <el-form>
            <span style="font-weight: bold; color: gray">方式</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-select v-model="form.mode" placeholder="请选择">
              <el-option
                v-for="item in address"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- -------------------复选框------- -->
            <br />
            <br />
            <span style="font-weight: bold; color: gray">租金</span>
            <div
              style="
                width: 90%;
                height: 20px;
                margin-left: 5%;
                margin-top: -20px;
              "
            >
              <el-radio-group v-model="form.pricelow">
                <el-radio label="0">0-1500元</el-radio>
                <el-radio label="1500">1500-2000元</el-radio>
                <el-radio label="2000">2000-2500元</el-radio>
                <el-radio label="2500">2500-3000元</el-radio>
                <el-radio label="3000">3000-3500元</el-radio>
                <el-radio label="3500">≥3500元</el-radio>
              </el-radio-group>
            </div>
            <br />
            <span style="font-weight: bold; color: gray">户型</span>
            <div
              style="
                width: 90%;
                height: 20px;
                margin-left: 5%;
                margin-top: -20px;
              "
            >
              <el-radio-group v-model="form.type">
                <el-radio label="1室">1室</el-radio>
                <el-radio label="2室">2室</el-radio>
                <el-radio label="3室">3室</el-radio>
                <el-radio label="4室">4室</el-radio>
                <el-radio label="4室+">4室+</el-radio>
              </el-radio-group>
            </div>
            <br />
            <span style="font-weight: bold; color: gray">租期</span>
            <div
              style="
                width: 90%;
                height: 20px;
                margin-left: 5%;
                margin-top: -20px;
              "
            >
              <el-radio-group v-model="form.term">
                <el-radio label="1">月租</el-radio>
                <el-radio label="6">半年起</el-radio>
                <el-radio label="12">一年起</el-radio>
                <el-radio label="24">两年起</el-radio>
              </el-radio-group>
            </div>
            <br />
            <span style="font-weight: bold; color: gray">楼层</span>
            <div
              style="
                width: 90%;
                height: 20px;
                margin-left: 5%;
                margin-top: -20px;
              "
            >
              <el-radio-group v-model="form.floorlow">
                <el-radio label="1">1-6层</el-radio>
                <el-radio label="7">7-18层</el-radio>
                <el-radio label="18">18+层</el-radio>
              </el-radio-group>
              
            </div>
            <br>
            <el-button type="primary" @click="onSubmit">查找</el-button>
          </el-form>
        </div>
        <!-- -------------------筛选出的房屋列表---------------- -->
        <div id="house" style="width: 100%; height: auto">
          <br />
          <hr
            style="
              height: 1px;
              border: none;
              border-top: 1px dashed lightgray;
              text-align: center;
              margin-right: 20px;
              margin-left: 25px;
            "
          />
          <p style="font-size: 18px; font-weight: bold">
            已为您找到以下合适房源
          </p>
          <!-- ---------------卡片------- -->
          <el-row>
            <el-col
              style="margin-bottom: 40px"
              :span="5"
              v-for="(o, index) in houses"
              :key="o"
              :offset="index > 0 ? 2 : 2"
            >
            <div @click="toSingleHouse(o.house.hid)">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <el-image fit="cover" :src="o.img" class="image" :alt="o.house.htitle"
               />
                <div style="padding: 14px">
                  <span>{{o.house.hestate}}</span>
                  <p class="address" style="color: gray; font-size: 14px">
                    {{o.house.hestate}}
                  </p>
                  <div class="bottom clearfix">
                    <a style="text-align: right; color: red" class="price" >
                      {{o.house.hprice}}/月
                    </a>
                  </div>
                </div>
              </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
        <br />
        <br />
        <hr
          style="
            height: 1px;
            border: none;
            border-top: 1px dashed lightgray;
            text-align: center;
            margin-right: 20px;
          "
        />
        <div style="text-align: center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="20"
            :page-size="20"
          >
          </el-pagination>
        </div>
      </div>
    </el-main>
    <!-- ------------------------尾部-------------------- -->
    <br />
    <br />
    <el-footer style="background-color: #f5f5f6; display: flex">
      <div
        style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
          "
      >
        <p style="text-align: center; margin-top: 28px">
          <a
            style="
              color: #545c64;
              font-size: 26px;
              font-weight: bold;
              text-decoration: none;
            "
            href="#/"
            >泊寓</a
          >
        </p>
      </div>
      <div
        style="
            width: 50%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
      >
        <p style="font-size: 13px; text-align: center; margin-top: 35px">
          <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
          31010402000253号 | 鲁ICP备17003747号
        </p>
      </div>
      <div
        style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
      >
        <p style="font-size: 14px; text-align: center; margin-top: 35px">
          <i class="el-icon-phone-outline">010-6088-8888</i>
        </p>
      </div>
    </el-footer>
  </el-contaioner>
</template>

<script>
import { queryHouseList } from "@/network/house"
import { getHouseBylotskeys } from "@/network/house";
export default {
  data() {
    return {
      houses:'',
      input: "",
      radio: "",
      checkList: [""],
      props: { multiple: true },
      address: [
        {
          value: "整租",
          label: "整租",
        },
        {
          value: "合租",
          label: "合租",
        },
      ],
      value: "",
      form: {
        mode: "",
        pricelow: 0,
        type: "",
        term: 0,
        floorlow: "",
      },
    };
  },
  created(){
    queryHouseList().then(res=>{
      console.log(res);
      this.houses = res;
    })
  },
  methods: {
    onSubmit() {
      getHouseBylotskeys(this.form).then((res) => {
        this.houses = res;
      });
    },
    toSingleHouse(id){
      console.log(id);
      this.$router.push("/singleHome/" + id);
    }
  },
};
</script>

<style>
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>